<style>
    #ddTEAMconfig .DDT_content {
        padding-top: 24px
    }

    #ddTEAMconfig .bind_dd {
        width: 180px;
        height: 264px;
        border: 1px solid #e5e5e5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #ddTEAMconfig .bind_dd i {
        font-size: 32px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #ddd;
        cursor: pointer;
    }

    #ddTEAMconfig .bind_dd p {
        font-size: 14px;
        color: #999;
    }

    #ddTEAMconfig .bind_dd .pic {
        display: flex;
        flex-direction: column;
        width: 165px;
        height: 165px;
        margin: 5px;
    }

    #ddTEAMconfig .bind_dd .pic img {
        width: 100%;
        height: 100%;
    }

    #ddTEAMconfig .bind_dd .text {
        font-size: 14px;
        text-align: center;
        margin: 20px 0;
    }

    #ddTEAMconfig .bind_dd .opera {
        width: 100%;
        display: flex;
        height: 32px;
    }

    #ddTEAMconfig .bind_dd .opera li {
        background: -webkit-gradient(linear, 0 0, 0 bottom, from(#fcfcfc), to(#ececec));
        color: #666;
        width: 50%;
        border: 0;
        margin: 0;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border: 1px solid #e5e5e5;
        cursor: pointer;
    }

    #ddTEAMconfig .dd_results_instr {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #ddTEAMconfig .selected {
        width: 300px;
        height: 34px;
        border-radius: 4px;
        border: 1px solid #e5e5e5;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    }

    #ddTEAMconfig .optionArea {
        background: #Fff;
        height: 90px;
        overflow-y: auto
    }

    #ddTEAMconfig .optionArea li {
        height: 28px;
        text-indent: 10px;
        line-height: 28px;
    }

    #ddTEAMconfig .optionArea li:hover {
        background-color: #838eba;
        color: #fff;
    }
</style>
<section id="ddTEAMconfig" class="pl-24 pr-24">
    <div class="hl-list-title" style="padding: 19px 0">
        <h4>钉钉团队配置</h4>
    </div>
    <div class="DDT_content">
        <div class="bind_dd" @click="isShowQyLayer = true" v-if=" corpConfigFlag == 'N' && permissions.indexOf('c205') > -1 ">
            <i class="icon-Gm-add"></i>
            <p>绑定钉钉团队</p>
        </div>
        <div class="bind_dd" v-if=" corpConfigFlag !== 'N' ">
            <ul class="pic"><img :src="serviceInfo.appIconUrl" alt=""></ul>
            <ul class="text">{{serviceInfo.appName}}</ul>
            <ul class="opera">
                <li @click="isflag = true" v-if="permissions.indexOf('c206') > -1">解绑</li>
                <li @click="configTarge" v-if="permissions.indexOf('c207') > -1">配置</li>
            </ul>
        </div>
    </div>
    <!-- //解绑钉钉 -->
    <div class="delWXpns" v-if="isflag">
        <div class="container">
            <div class="close"><i class="icon-Gm-close" @click="closeFlag"></i></div>
            <div class="content">
                <p>解绑钉钉</p>
                <img :src="serviceInfo.appIconUrl" alt="">
                <b>解绑后将无法再收到消息推送 及同步组织架</b>
            </div>
            <div class="operation">
                <button type="button" class="btn n-btn-primary" @click="server_untying">确认解绑</button>
                <button type="button" class="btn n-btn-outline" @click="closeFlag">取消</button>
            </div>
        </div>
    </div>
    <!-- 企业绑定 -->
    <div class="pop box-o-shadow ddqy-pop" v-show="isShowQyLayer" style="width:600px;">
        <div class="head-pop font-16"><span>企业绑定</span>
            <button class="fw-close absolute close" type="button" @click="isShowQyLayer = false">×</button>
        </div>
        <div class="content-pop">
            <div class="content" style="padding:40px 45px;">
                <div style="margin-bottom:20px;">
                    <div class="dy-flex mb-10">
                        <div class="dy-fx-1 line-height-34 ">微应用ID:</div>
                        <div class="dy-fx-3">
                            <input type="text" class="form-control agentId-ipt" v-model="agentId" style="width:300px;" @blur="validateAgentId">
                        </div>
                    </div>
                    <div class="dy-flex mb-10">
                        <div class="dy-fx-1 line-height-34 ">授权Key:</div>
                        <div class="dy-fx-3">
                            <input type="text" class="form-control appKey-ipt" v-model="appKey" style="width:300px;" @blur="validateAppKey">
                        </div>
                    </div>
                    <div class="dy-flex mb-10">
                        <div class="dy-fx-1 line-height-34 ">授权Secret:</div>
                        <div class="dy-fx-3">
                            <input type="text" class="form-control appSecret-ipt" v-model="appSecret" style="width:300px;" @blur="validateAppSecret">
                        </div>
                    </div>
                    <div class="dy-flex">
                        <div class="dy-fx-1 line-height-34 ">微应用类型:</div>
                        <div class="dy-fx-3">
                            <div class="select-ul" style="width:300px;">
                                <span class="select-name br-4 box-i-shadow" @click="selectedArea = !selectedArea">{{dictName}}</span>
                                <div class="optionArea" v-if="selectedArea">
                                    <li v-for="(item,index) in optionList" @click="selectedict(item.dictValue,item.dictName)">{{item.dictName}}</li>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <ul class="dd_results_instr">
                    <li v-if="bindStatus == 'S'"><span class="icon-Nav-dispose-complete" style="font-size:44px;color:#44B548"></span></li>
                    <li v-if="bindStatus == 'E'"><span class="icon-Gm-delete-2" style="font-size:44px;color: #FF493B"></span></li>
                    <li style="font-size: 14px;color:#999;margin-top:15px;">{{resultsText}}</li>
                </ul>

            </div>
        </div>
        <div class="fw-button">
            <button type="button" class="fw-submit yes mr-10" @click="confirmBindQy">确认</button>
            <button type="button" class="fw-submit no" @click="closeQyLayer">取消</button>
        </div>
    </div>
    <!-- 遮罩层 -->
    <div class="backdrop" v-show="isShowQyLayer"></div>
</section>
<script src="modules/system_config/scripts/ddTEAMconfig.js" charset="utf-8"></script>
